<template>
	<view class="container">
		<u-sticky offset-top="-44">
			<!-- <u-navbar leftIconSize="40" placeholder titleStyle="font-size:36rpx;font-weight:600;" title="队列中心" bgColor="#ffffff" :autoBack="true"></u-navbar> -->
			<view class="tab flex">
				<view class="tab-item flex1 flex ai_center jc_center" @click="tabChange(item.id)" :class="{active:tab==item.id}" v-for="(item,index) in tabList">{{item.title}}</view>
			</view>
		</u-sticky>
		<view class="list" v-if="tab==1">
			<view class="list-item" v-for="item in list">
				<view class="item-header flex jc_between ai_center">
					<view class="item-title">{{item.tool}}</view>
					<!-- <view class="item-btn">取消排队</view> -->
				</view>
				<view class="item-content flex ">
					<!-- <view class="item-col flex1 flex fd_c ai_center jc_center">
						<view class="item-col-value">{{item.sorted}}</view>
						<view class="item-col-label">排队</view>
					</view> -->
					<view class="item-col flex1 flex fd_c ai_center jc_center">
						<view class="item-col-value">{{item.cost}}</view>
						<view class="item-col-label">算力消耗</view>
					</view>
					<view class="item-col flex1 flex fd_c ai_center jc_center">
						<view class="item-col-value">{{item.style}}</view>
						<view class="item-col-label">风格</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list" v-if="tab==2">
			<view class="list-item" v-for="item in list">
				<view class="item-header flex jc_between ai_center">
					<view class="item-title">{{item.tool}}</view>
					<!-- <view class="item-btn">取消排队</view> -->
				</view>
				<view class="item-content flex ">
					<!-- <view class="item-col flex1 flex fd_c ai_center jc_center">
						<view class="item-col-value">{{item.cost_time}}</view>
						<view class="item-col-label">耗时</view>
					</view> -->
					<view class="item-col flex1 flex fd_c ai_center jc_center">
						<view class="item-col-value">{{item.cost}}</view>
						<view class="item-col-label">算力消耗</view>
					</view>
					<view class="item-col flex1 flex fd_c ai_center jc_center">
						<view class="item-col-value">{{item.style}}</view>
						<view class="item-col-label">风格</view>
					</view>
				</view>
				<view class="item-progress">
					<view class="item-progress-line" style="width: 60%;"></view>
					<view class="item-progress-value">60%</view>
				</view>
			</view>
		</view>
		<view class="list" v-if="tab==3">
			<view class="list-item" v-for="item in list">
				<view class="item-header flex jc_between ai_center">
					<view class="item-title">{{item.tool}}</view>
					<view class="item-btn" v-if="item.fileurls" @click="preview(item.fileurls)">下载</view>
					<view v-else >生成失败</view>
				</view>
				<view class="item-content flex ">
					<!-- <view class="item-col flex1 flex fd_c ai_center jc_center">
						<view class="item-col-value">{{item.cost_time}}</view>
						<view class="item-col-label">耗时</view>
					</view> -->
					<view class="item-col flex1 flex fd_c ai_center jc_center">
						<view class="item-col-value">{{item.cost}}</view>
						<view class="item-col-label">算力消耗</view>
					</view>
					<view class="item-col flex1 flex fd_c ai_center jc_center">
						<view class="item-col-value">{{item.style}}</view>
						<view class="item-col-label">风格</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab:1,
				tabList:[{
					title:'排队中',
					id:1
				},{
					title:'生成中',
					id:2
				},{
					title:'已完成',
					id:3
				}],
				list:[]
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			preview(source){
				if(source){
					uni.previewImage({
						urls:[source]
					})
				}else{
					uni.showToast({
						title:'生成失败',
						icon:'none'
					})
				}
				
			},
			getList(){
				this.get('tool/queue',{
					type:this.tab
				}).then(res=>{
					this.list = res.data.list.data
				})
			},
			tabChange(tab){
				this.tab = tab
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		background-color: #F9F9F9;
		min-height: 100vh;
		.tab{
			height: 100rpx;
			background-color: #ffffff;
			&-item{
				font-size: 32rpx;
				color: #333333;
				&.active{
					color: #1CFFE5;
					position: relative;
					&::after{
						content:'';
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 108rpx;
						height: 4rpx;
						background: linear-gradient(270deg, #1CFFE5 0%, #79FFCD 100%);
						border-radius: 20rpx;
					}
				}
			}
		}
		.list{
			padding:32rpx 28rpx;
			&-item{
				background-color: #ffffff;
				margin-bottom: 28rpx;
				border-radius: 20rpx;
				padding:0 0 4rpx;
				.item-header{
					height: 94rpx;
					border-bottom: 1px solid #D9D9D9;
					padding:0 22rpx;
					font-size: 24rpx;
				}
				.item-btn{
					padding:0 20rpx;
					height: 52rpx;
					border-radius: 26rpx;
					border:1px solid #333333;
					line-height: 48rpx;
					min-width: 136rpx;
					text-align: center;
				}
				.item-content{
					padding:56rpx 0 52rpx;
					.item-col:nth-child(2){
						border-left: 1px solid #D9D9D9;
						border-right: 1px solid #D9D9D9;
					}
					.item-col-label{
						font-size: 24rpx;
						margin-top: 20rpx;
					}
					.item-col-value{
						font-size: 40rpx;
						font-weight: bold;
					}
				}
				.item-progress{
					width: 644rpx;
					margin: 0 auto 40rpx;
					height: 32rpx;
					border-radius: 16rpx;
					background-color: #F6F7F9;
					position: relative;
					&-line{
						height: 100%;
						background: linear-gradient(270deg, #8AFEC8 11%, #22FFE6 100%);
						border-radius: 16rpx;
					}
					&-value{
						position: absolute;
						right: 14rpx;
						top:50%;
						transform: translateY(-50%);
						font-size:20rpx
					}
				}
			}
			
		}
	}
</style>
